@use "./colors";
@use "./variables";

@mixin overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin shadow {
  box-shadow: variables.$box-shadow;
}

@mixin left-shadow {
  box-shadow: variables.$box-shadow-left;
}

@mixin right-shadow {
  box-shadow: variables.$box-shadow-right;
}

@mixin shadow-inset {
  box-shadow: variables.$box-shadow-inset;
}

$bar-width: 20px;
$gap-width: 18px;
$stripes-width: 83px;

@keyframes striped-bg-animation {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: $stripes-width;
  }
}

@mixin striped-background($color, $height) {
  background-image: linear-gradient(
    113deg,
    transparent 0,
    $color 0,
    $color $bar-width,
    transparent $bar-width,
    transparent ($bar-width + $gap-width),
    $color ($bar-width + $gap-width),
    $color ($bar-width * 2 + $gap-width),
    transparent ($bar-width * 2 + $gap-width),
    transparent ($bar-width * 2 + $gap-width * 2),
    $color ($bar-width * 2 + $gap-width * 2)
  );
  background-size: $stripes-width $height;
  background-position-y: center;
  background-repeat: repeat-x;
  animation: striped-bg-animation 2s linear infinite;
}

// For when we want an element to be visually hidden but still accessible to screen readers
// Taken from: https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
@mixin visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

// need something to look like a button but don't want to @forward the button module, this is it!
@mixin base-button {
  // base "button"
  transition: 0.2s ease-in;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: variables.$border-radius-sm;
  font-weight: 600;
  cursor: pointer;

  // sizeXS
  height: variables.$button-height-xs;
  font-size: variables.$font-size-sm;
  line-height: 15px;
  padding: 10px;
}

// looks like a buttonp[variant=link], like if you need a <Link /> to look like a button
@mixin link-text {
  @include base-button;

  // secondary
  color: colors.$grey-400;
  border: 1px solid colors.$grey-300;

  &:hover {
    border-color: colors.$grey-400;
    color: colors.$grey-500;
  }

  &:active {
    border-color: colors.$grey-500;
    color: colors.$grey-500;
  }

  // custom background (secondary button has no background)
  background-color: colors.$foreground;
}
